<!doctype html>
<html>
  <head>
    <title>Screenshotter test</title>
    <script src="../../katex.js" type="text/javascript"></script>
    <style type="text/css">
      #math, #pre, #post {
        font-size: 4em;
      }
      body {
        font-family: "DejaVu Serif",serif;
      }
      @font-face {
        font-family: "Mincho";
        src: url("fonts/mincho/font_1_honokamin.ttf") format("truetype");
      }
      @font-face {
        font-family: "Batang";
        src: url("fonts/batang/batang.ttf") format("truetype");
      }
      .katex .cjk_fallback {
          font-family: "Mincho",serif;
      }
      .katex .hangul_fallback {
          font-family: "Batang",serif;
      }
    </style>
  </head>
  <body>
    <span id="pre"></span>
    <span id="math"></span>
    <span id="post"></span>
    <script type="text/javascript">
      function load_fonts_and_images(callback) {
        if (typeof Promise === "undefined") {
          callback();
          return;
        }

        var results = [];

        function load_font(name, style) {
          if (!document.fonts || !document.fonts.load) return;
          // 10px is arbitrarily selected value
          results.push(document.fonts.load((style || "") + " 10px " + name));
        }

        var fonts = {AMS:1,Caligraphic:3,Fraktur:3,Main:15,Math:12,Script:1,
            SansSerif:7,Size1:1,Size2:1,Size3:1,Size4:1,Typewriter:1}; // see below
        for (var f in fonts) {
          var ff = fonts[f];
          var name = "KaTeX_" + f;
          if (ff & 1) load_font(name);
          if (ff & 2) load_font(name, "bold");
          if (ff & 4) load_font(name, "italic");
          if (ff & 8) load_font(name, "bold italic");
        }
        load_font("Mincho");
        load_font("Batang");

        for (var i = 0; i < document.images.length; i++) {
          var img = document.images[i];
          results.push(new Promise(function (done, error) {
            if (img.complete) {
              done();
            } else {
              img.addEventListener('load', done);
              img.addEventListener('error', error);
            }
          }));
        };

        Promise.all(results).then(callback)
      }

      function handle_search_string(search) {
        var query = {};
        var re = /(?:^\?|&)([^&=]+)(?:=([^&]+))?/g;
        var match;
        while (match = re.exec(search)) {
            query[match[1]] = decodeURIComponent(match[2]);
        }
        var mathNode = document.getElementById("math");

        var settings = {
            displayMode: !!query["display"],
            throwOnError: !query["noThrow"],
            strict: false,
            trust: true  // trust test inputs
        };
        if (query["errorColor"]) {
            settings.errorColor = query["errorColor"];
        }
        var macros = {};
        var macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g;
        while ((match = macroRegex.exec(search)) !== null) {
            settings.macros = macros;
            macros["\\" + match[1]] = decodeURIComponent(match[2]);
        }

        mathNode.setAttribute("style", query["styles"] || "");
        katex.render(query["tex"], mathNode, settings);
        document.getElementById("pre").innerHTML = query["pre"] || "";
        document.getElementById("post").innerHTML = query["post"] || "";
      }
      handle_search_string(window.location.search);
    </script>
  </body>
</html>
